<template>
	<view class="container">
		<view class="example-body">
			<uni-search-bar class="body-2" radius="5" placeholder="请输入搜索的内容" clearButton="auto" cancelButton="none"
				@confirm="search" />
		</view>
		<view class="center">
			<view class="aside">
				<p v-for="item in menuItems" :key="item.id" @click="selectMenu(item.id)"
					:class="{ active: selectedMenu === item.id }">
					{{ item.name }}
				</p>
			</view>
			<view class="content">
				<!-- 推荐内容 -->
				<view v-if="selectedMenu === 'recommend'" class="content-section">
					<view class="top-banner">
						<image class="banner-image" src="../../static/image/背景图.png" mode="aspectFill"></image>
					</view>
					<h1 class="section-title">推荐课程</h1>
					<view class="course-grid">
						<view class="course-card" v-for="course in recommendCourses" :key="course.id"
							@click="handleCourseClick(course.id)">
							<text>{{ course.name }}</text>
						</view>
					</view>
				</view>

				<!-- 其他内容区 -->
				<view v-else class="content-section">
					<view class="top-banner">
						<image class="banner-image" src="../../static/image/背景图.png" mode="aspectFill"></image>
					</view>
					<h1 class="section-title">{{ currentMenuTitle }}</h1>
					<view class="course-grid">
						<view class="course-card" v-for="course in currentCourses" :key="course.id" @click="handleCourseClick(course.id)">
							<text>{{ course.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				selectedMenu: 'recommend',
				menuItems: [{
						id: 'recommend',
						name: '推荐'
					},
					{
						id: 'math',
						name: '高等数学'
					},
					{
						id: 'English',
						name: '大学英语'
					},
					{
						id: 'bigdata',
						name: '大数据'
					},
					{
						id: 'java',
						name: 'JAVA'
					},
					{
						id: 'frontend',
						name: '前端'
					},
					{
						id: 'cloud',
						name: '云计算'
					},
					{
						id: 'more',
						name: '更多技术'
					}
				],
				recommendCourses: [{
						id: 'java',
						name: 'JAVA'
					},
					{
						id: 'bigdata',
						name: '大数据'
					},
					{
						id: 'frontend',
						name: '前端'
					},
					{
						id: 'cloud',
						name: '云计算'
					},
					{
						id: 'more',
						name: '更多技术'
					}
				],
				coursesData: {
					math: [{
							id: 'math1',
							name: '导数微积分'
						},
						{
							id: 'math2',
							name: '微分方程'
						},
						{
							id: 'math3',
							name: '线性代数'
						},
						{
							id: 'math4',
							name: '向量代数与空间解析几何'
						},
						{
							id: 'math5',
							name: '无穷级数'
						},
					],
					English: [{
							id: 'English1',
							name: '听力'
						},
						{
							id: 'English2',
							name: '口语'
						},
						{
							id: 'English3',
							name: '写作'
						},
						{
							id: 'English4',
							name: '翻译'
						},
						{
							id: 'English5',
							name: '英语语法'
						},
					],
					java: [{
							id: 'java1',
							name: 'Java基础'
						},
						{
							id: 'java2',
							name: 'Spring框架'
						},
						{
							id: 'java3',
							name: 'JavaWeb'
						},
						{
							id: 'java4',
							name: 'Java全部系列课程'
						}
					],
					bigdata: [{
							id: 'bigdata1',
							name: '大数据基础'
						},
						{
							id: 'bigdata2',
							name: 'Hadoop'
						},
						{
							id: 'bigdata3',
							name: 'Spark'
						},
						{
							id: 'bigdata4',
							name: '数据分析'
						},
						{
							id: 'bigdata5',
							name: '数据可视化'
						}
					],
					frontend: [{
							id: 'frontend1',
							name: 'HTML5'
						},
						{
							id: 'frontend2',
							name: 'CSS3'
						},
						{
							id: 'frontend3',
							name: 'JavaScript'
						},
						{
							id: 'frontend4',
							name: 'Vue.js'
						},
						{
							id: 'frontend5',
							name: 'React'
						}
					],
					cloud: [{
							id: 'cloud1',
							name: '云计算基础'
						},
						{
							id: 'cloud2',
							name: 'Docker'
						},
						{
							id: 'cloud3',
							name: 'Kubernetes'
						},
						{
							id: 'cloud4',
							name: 'AWS'
						},
						{
							id: 'cloud5',
							name: '阿里云'
						}
					],
					more: [{
							id: 'more1',
							name: 'C++'
						},
						{
							id: 'more2',
							name: 'Web'
						},
						{
							id: 'more3',
							name: 'Websocket'
						},
						{
							id: 'more4',
							name: 'ES6'
						},
						{
							id: 'more5',
							name: '原型及原型链'
						}
					]
				}
			}
		},
		computed: {
			currentMenuTitle() {
				const menu = this.menuItems.find(item => item.id === this.selectedMenu);
				return menu ? menu.name : '';
			},
			currentCourses() {
				return this.coursesData[this.selectedMenu] || [];
			}
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				});
			},
			selectMenu(menuId) {
				this.selectedMenu = menuId;
			},
			handleCourseClick(courseId) {
				// 如果是推荐页面的课程，跳转到对应分类
				if (this.selectedMenu === 'recommend') {
					this.selectedMenu = courseId;
				} else {
					uni.navigateTo({
						url: `/pages/course-xuexi/course-xuexi?courseId=${courseId}`
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.example-body {
		padding: 10px;
		width: 95%;
		display: flex;
		background-color: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.body-2 {
		flex: 1;
	}

	.center {
		width: 100%;
		height: 100vh;
		display: flex;
		margin-top: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.aside {
		width: 140px;
		background-color: #f8f9fa;
		padding: 15px 0;
	}

	.aside p {
		padding: 12px 15px;
		margin: 5px 10px;
		border-radius: 6px;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s;
		color: #555;
		font-size: 14px;
		border-left: 3px solid transparent;
	}

	.aside p:hover {
		background-color: #e9ecef;
		color: #333;
	}

	.aside p.active {
		background-color: #e3f2fd;
		color: #1976d2;
		border-left: 3px solid #1976d2;
		font-weight: 500;
	}

	.content {
		flex: 1;
		padding: 0;
	}

	.top-banner {
		position: relative;
		height: 150px;
		overflow: hidden;
		border-radius: 8px 8px 0 0;
	}

	.section-title {
		padding: 15px;
		color: #333;
		font-size: 20px;
		font-weight: bold;
		margin: 0;
		border-bottom: 1px solid #eee;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.course-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		gap: 12px;
	}

	.course-card {
		width: calc(50% - 10px);
		min-width: 160px;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transition: transform 0.3s, box-shadow 0.3s;
		cursor: pointer;
		border: 1px solid #eee;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.course-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	}

	.course-card text {
		// width: 115px;
		font-size: 14px;
		color: #333;
		font-weight: 500;
	}
</style>